<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/cropper.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="demoBox">
        <img id="avatar" src="images/picture.jpg" alt="Picture">
        <a class="edit_tx" href="javascript:;">编辑头像</a>
    </div>

    <div class="coverLayer">
        <h2>头像更换</h2>
        <a class="close_cover" href="javascript:;"><i>×</i></a>
        <div class="img_container">
            <img id="imageCover" alt="Picture" src="images/picture.jpg">
        </div>
        <div class="btn">
            <label title="重新上传" class="changeImg" for="inputImage">
                <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
                上传图片
            </label>

            <!-- 截取的头像大小在这里设置 -->
            <button class="cutAction" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 484, &quot;height&quot;: 280 }" type="button">保 存</button>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>

    <script src="js/cropper.js"></script>
    <script src="js/main.js"></script>
</body>
</html>